<template>
  <k-form-modal
    ref="formRef"
    width="middle"
    drawer
    label-width="90px"
    :title="state.mode === 1?'编辑代理':'新增代理'"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <div class="title">代理信息</div>
    <el-form-item label="代理名称" prop="name">
      <el-input v-model="state.model.name" clearable placeholder="账号名称" maxlength="20" />
    </el-form-item>
    <el-form-item label="代理账号" prop="mobile">
      <el-input
        v-model="state.model.mobile"
        clearable
        placeholder="请输入手机号"
        maxlength="11"
        :disabled="state.mode === 1"
      />
    </el-form-item>
    <el-form-item v-if="state.mode !== 1" label="初始密码" prop="password">
      <el-input
        v-model="state.model.password"
        type="password"
        show-password
        clearable
        placeholder="请输入初始密码"
        maxlength="20"
      />
    </el-form-item>
    <!-- <el-form-item label="代理平台" prop="_typeArr">
      <el-checkbox-group v-model="state.model._typeArr">
        <el-checkbox v-for="item in typeOptions" :key="item.value" :label="item.value">
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item> -->
    <!-- 考古加 -->
    <div v-if="state.model._typeArr.includes(1)">
      <el-form-item label="代理等级" prop="level">
        <el-select v-model="state.model.level" placeholder="不限" filterable style="width: 100%">
          <el-option
            v-for="item in levelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="代理状态" prop="status">
        <el-select v-model="state.model.status" placeholder="不限" filterable style="width: 100%">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="保证金"
        prop="safty"
        :disabled="state.mode === 1"
      >
        <el-input-number
          v-model="state.model.safty"
          placeholder="请输入初始保证金"
          clearable
          controls-position="right"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item
        label="佣金账期"
        prop="payment_period"
        :disabled="state.mode === 1"
      >
        <el-radio-group v-model="state.model.payment_period">
          <el-radio v-for="(o, i) in optionsPaymentPeriod" :key="i" :label="o.value">{{ o.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
    <!--大赢加  -->
    <!-- <div v-if="state.model._typeArr.includes(2)">
      <el-form-item label="代理等级" prop="dyj_level">
        <el-select v-model="state.model.dyj_level" placeholder="不限" filterable style="width: 100%">
          <el-option
            v-for="item in dyjLevelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="代理状态" prop="dyj_status">
        <el-select v-model="state.model.dyj_status" placeholder="不限" filterable style="width: 100%">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="保证金"
        prop="dyj_safty"
        :disabled="state.mode === 1"
      >
        <el-input-number
          v-model="state.model.dyj_safty"
          placeholder="请输入初始保证金"
          clearable
          controls-position="right"
          style="width: 100%"
        />
      </el-form-item>
    </div> -->

    <div class="title">开票信息</div>
    <el-form-item label="发票抬头" prop="invoice_head">
      <el-input v-model="state.model.invoice_head" clearable placeholder="发票抬头" maxlength="20" />
    </el-form-item>
    <el-form-item label="识别号" prop="taxpayer_no">
      <el-input v-model="state.model.taxpayer_no" clearable placeholder="识别号" maxlength="20" />
    </el-form-item>
    <el-form-item label="电子邮箱" prop="invoice_email">
      <el-input v-model="state.model.invoice_email" clearable placeholder="电子邮箱" maxlength="20" />
    </el-form-item>
    <el-form-item
      label="是否为一般纳税人"
      prop="is_taxpayer"
      label-width="140px"
    >
      <el-radio-group v-model="state.model.is_taxpayer">
        <el-radio
          v-for="item in isTaxpayerOptions"
          :key="item.value"
          :label="item.value"
        >{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <template v-if="state.model.is_taxpayer === 1">
      <el-form-item label="开户银行" prop="invoice_bank_name">
        <el-input v-model="state.model.invoice_bank_name" clearable placeholder="请输入开户银行" maxlength="20" />
      </el-form-item>
      <el-form-item label="银行账号" prop="invoice_bank_card">
        <el-input v-model="state.model.invoice_bank_card" clearable placeholder="请输入开户行账号" maxlength="20" />
      </el-form-item>
      <el-form-item label="注册地址" prop="invoice_bank_address">
        <el-input v-model="state.model.invoice_bank_address" clearable placeholder="这是注册地址信息" maxlength="50" />
      </el-form-item>
      <el-form-item label="公司电话" prop="invoice_mobile">
        <el-input v-model="state.model.invoice_mobile" clearable placeholder="请输入公司电话" maxlength="50" />
      </el-form-item>
      <el-form-item
        label="纳税人证明"
        prop="taxpayer_proof"
      >
        <KImageUploader
          ref="uploadRef"
          :file-list="fileList"
        >
          <template #default>
            <div class="add">
              <el-icon><Plus /></el-icon>
              <div>上传证明</div>
            </div>
          </template>
        </KImageUploader>
      </el-form-item>
    </template>
  </k-form-modal>
</template>

<script setup lang='ts'>
import { ref, watch } from 'vue';
import { useFormModal } from '@crud/index';
import { optionsPaymentPeriod } from '@/config/index';
import { colonelAdd, colonelEdit } from '@/api/crm-agency/kgj/colonel';
import { ElMessage } from 'element-plus';
import { KImageUploader } from '@/components/k-image-uploader';
defineOptions({
  name: 'DyjAgentListAddEditModal'
});
const emits = defineEmits(['success']);
const uploadRef = ref();
const fileList = ref<any[]>([]);
const formRef = ref();
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  model: {
    name: undefined,
    mobile: undefined,
    password: '',
    level: undefined,
    safty: undefined,
    status: undefined,
    dyj_level: undefined,
    dyj_safty: undefined,
    dyj_status: undefined,
    invoice_head: undefined,
    taxpayer_no: undefined,
    invoice_email: undefined,
    is_taxpayer: 0,
    invoice_bank_name: undefined,
    invoice_bank_card: undefined,
    invoice_bank_address: undefined,
    invoice_mobile: undefined,
    taxpayer_proof: undefined,
    extend_type: undefined,
    colonel_id: undefined,
    _typeArr: [1],
    payment_period: 1
  },
  rules: {
    name: [{ required: true, message: '请输入代理名称' }],
    mobile: [{ required: true, message: '请输入代理账号' }],
    safty: [{ required: true, message: '请输入考古加保证金' }],
    level: [{ required: true, message: '请选择代理等级' }],
    is_taxpayer: [{ required: true, message: '请选择是否纳税人' }],
    dyj_safty: [{ required: true, message: '请输入大赢加保证金' }],
    dyj_level: [{ required: true, message: '请选择代理等级' }]
  },
  onShow: (mode = 0, data: any) => {
    fileList.value = [];
    if (data) {
      fileList.value = data.taxpayer_proof ? [{ url: data.taxpayer_proof }] : [];
      state.model = {
        ...state.model,
        ...data,
        name: data.name,
        mobile: data.mobile,
        password: data.password,
        safty: data.safty,
        status: data.status,
        dyj_safty: data.dyj_safty,
        dyj_status: data.dyj_status,
        invoice_head: data.invoice_head,
        taxpayer_no: data.taxpayer_no,
        invoice_email: data.invoice_email,
        is_taxpayer: data.is_taxpayer,
        invoice_bank_name: data.invoice_bank_name,
        invoice_bank_card: data.invoice_bank_card,
        invoice_bank_address: data.invoice_bank_address,
        invoice_mobile: data.invoice_mobile,
        taxpayer_proof: data.taxpayer_proof,
        extend_type: data.extend_type,
        level: data.level ? data.level : '',
        dyj_level: data.dyj_level ? data.dyj_level : '',
        colonel_id: data.colonel_id,
        _typeArr: [1] // data.extend_type === 3 ? [1, 2] : [data.extend_type || 1]
        // payment_period: data.payment_period
      };
    }
  },
  onSubmit: async (model: any, mode = 0) => {
    let params = {
      ...model,
      level: model._typeArr.includes(2) && model._typeArr.length === 1? 0 : model.level,
      safty: model._typeArr.includes(2)&& model._typeArr.length === 1? 0 : model.safty,
      status: model._typeArr.includes(2)&& model._typeArr.length === 1? 0 : model.status,
      dyj_level: model._typeArr.includes(1)&& model._typeArr.length === 1? 0 : model.dyj_level,
      dyj_safty: model._typeArr.includes(1)&& model._typeArr.length === 1? 0 : model.dyj_safty,
      dyj_status: model._typeArr.includes(1)&& model._typeArr.length === 1? 0 : model.dyj_status,
      extend_type: model._typeArr.length >= 2 ? 3 :model._typeArr[0],
      taxpayer_proof: model?.taxpayer_proof?.url ? model.taxpayer_proof.url : model.taxpayer_proof,
      _typeArr: undefined
    };
    const res = mode === 1 ? await colonelEdit(params) : await colonelAdd(params);
    if (!res.err) {
      ElMessage.success(mode===1 ? '编辑成功': '新增成功');
      emits('success');
    }
    return res;
  }
});
/**
 * @options
 */
const levelOptions = [
  { value: 1, label: '初级代理' },
  { value: 2, label: '高级代理' }
];
// const dyjLevelOptions = [
//   { value: 1, label: 'A级代理' },
//   { value: 2, label: 'S级代理' }
// ];
const statusOptions = [
  { value: 0, label: '正常' },
  { value: 1, label: '暂停' },
  { value: 2, label: '终止' }
];
// const typeOptions = [
//   {
//     label: '考古加',
//     value: 1
//   },
//   {
//     label: '大赢加',
//     value: 2
//   }
// ];
const isTaxpayerOptions = [
  {
    label: '是',
    value: 1
  },
  {
    label: '否',
    value: 0
  }
];
watch(() => uploadRef?.value?.getImgUrl(),
  (val) => {
    state.model.taxpayer_proof = val;
  },
  {
    immediate: false
  });
defineExpose({
  show: methods.show
});
</script>
<style scoped>
.mr-10 {
  margin-right: 10px
}

.title {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
